import React, { useState, useEffect } from 'react';
import { Card, Form, Row, Col, Input, Select, Button, Table, Popconfirm, message, Badge, Divider, DatePicker } from 'antd';
import BreadcrumbBox from '@/components/Base/BreadcrumbBox';
import PaymentDetail from './PaymentDetail';
import { withRouter } from 'react-router-dom';
import { formatBalance } from '@/utils/utils';
import { useDebounceFn  } from '@/utils';
import moment from 'moment';
import '../index.scss';
import {
  getInfoByOrderNo,
} from '@/api/order'

const Query = (props) => {
  const [dataSource, setDataSource] = useState([])
  const [searchForm] = Form.useForm();
  // 筛选数据
  const [values] = useState({
    transOrderNo: '',
  })
  const { history } = props
  // 显示详情
  const [showDetail, setShowDetail] = useState(false)
  const [detailParams, setDetailParams] = useState(null)
  // 面包屑
  const breadcrumbList = ['订单管理', '订单查询']
  // 布局
  const layout1 = { sm: 24, md: 12, lg: 12, xl: 6, xxl: 6 };
  const labelCol = { sm: 24, md: 8, lg: 8, xl: 8 };
  const wrapperCol = { sm: 24, md: 16, lg: 16, xl: 16 };
  
  const [formData, setFormData] = useState(values)
  let [loading, setLoading] = useState(false)
  // 存款订单状态
  const orderStatus = [
    // { value: '-1', label: '全部' },
    { value: '0', label: '未支付' },
    { value: '1', label: '已支付' },
    { value: '2', label: '已受理' },
    { value: '3', label: '已审核' },
    { value: '4', label: '成功' },
    { value: '5', label: '失败' },
    
    { value: '10001', label: '出售中' },
    { value: '10002', label: '暂停出售' },
    { value: '10004', label: '交易中' },
    { value: '10007', label: '交易成功' },
    { value: '10009', label: '超时卖家取消交易' },
    { value: '10003', label: '待交易' },
    { value: '10005', label: '取消交易' },
    { value: '10006', label: '已支付' },
    { value: '10008', label: '已评价' },
    { value: '10010', label: '超时买家取消交易' },
    { value: '10011', label: '超时自动完成交易' },
    { value: '10012', label: '工单发货' },
    { value: '10013', label: '交易失败' },
  ]
  
  // 提交弹框表单做防抖处理
  const handleSubmit = useDebounceFn((values) => {
    onFinish(values)
  }, 1500, true);
  const onFinish = async (values) => {
    setLoading(true)
    let params = {
      transOrderNo: values.transOrderNo
    }
    let res =  await getInfoByOrderNo(params)
    if(res.code === 0 && res.data){
      setDataSource([res.data] || [])
    }
    setLoading(false)
  };
  // 表单头部
  const columns = [
    {
      title: '主订单号',
      dataIndex: 'mainOrderNo',
      key: 'mainOrderNo',
      align: 'center',
      render: (text: any) => text || '--',
    },
    {
      title: '订单编号',
      dataIndex: 'orderNo',
      key: 'orderNo',
      align: 'center',
      render: (text: any) => text || '--',
    },
    {
      title: '仲裁单号',
      dataIndex: 'arbitrateOrderNo',
      key: 'arbitrateOrderNo',
      align: 'center',
      render: (text: any) => text || '--',
    },
    {
      title: '卖家账号',
      dataIndex: 'sellerAccount',
      key: 'sellerAccount',
      align: 'center',
      render: (text: any) => text || '--',
    },
    {
      title: '卖家昵称',
      dataIndex: 'sellerNickName',
      key: 'sellerNickName',
      align: 'center',
      render: (text: any) => text || '--',
    },
    {
      title: '出售金额',
      dataIndex: 'sellerAmount',
      key: 'sellerAmount',
      align: 'center',
      render: (text: any) => text || '--',
    },
    {
      title: '买家账号',
      dataIndex: 'buyerAccount',
      key: 'buyerAccount',
      align: 'center',
      render: (text: any) => text || '--',
    },
    {
      title: '买家昵称',
      dataIndex: 'buyerNickName',
      key: 'buyerNickName',
      align: 'center',
      render: (text: any) => text || '--',
    },
    {
      title: '购买金额',
      dataIndex: 'buyerAmount',
      key: 'buyerAmount',
      align: 'center',
      render: (text: any) => text || '--',
    },
    {
      title: '订单申请时间',
      dataIndex: 'orderApplyTime',
      key: 'orderApplyTime',
      align: 'center',
      render: (text: any) => text || '--',
    },
    {
      title: '仲裁申请时间',
      dataIndex: 'arbitrateApplyTime',
      key: 'arbitrateApplyTime',
      align: 'center',
      render: (text: any) => text || '--',
    },
    {
      title: '仲裁状态',
      dataIndex: 'arbitrateStatus',
      key: 'arbitrateStatus',
      align: 'center',
      render: (text: string, record: any) => {
        switch (record.arbitrateStatus) {
          case 2:
            return <Badge status="warning" text="审核中" />;
            break;
          case 1:
            return <Badge status="processing" text="仲裁中" />;
            break;
          case 3:
            return <Badge status="success" text="仲裁完成" />;
            break;
        }
      },
    },
    {
      title: '订单状态',
      dataIndex: 'orderStatus',
      key: 'orderStatus',
      align: 'center',
      render: (text, record) => orderStatus.filter(item => parseInt(item.value) === parseInt(text))[0].label,
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      width: 120,
      fixed: 'right',
      render: (text: string, record: any) => {
        return <>
          {
            record.arbitrateStatus === 1
            ?
            <>
              <a
                onClick={() => {
                  goDetail({
                    edit: true,
                    id: record.orderNo
                  })
                }}
              >仲裁</a>
              <Divider type="vertical" />
            </>
            :
            ''
          }
          {
            record.arbitrateStatus === 2
            ?
            <>
              <a
                onClick={() => {
                  goDetail({
                    edit: true,
                    id: record.orderNo
                  })
                }}
              >审核</a>
              <Divider type="vertical" />
            </>
            :
            ''
          }
          <a
            onClick={() => {
              goDetail({
                edit: false,
                id: record.orderNo
              })
            }}
          >
            查看
          </a>
        </>;
      },
    }
  ];
  
  const goDetail  = (data) => {
    setDetailParams(data);
    setShowDetail(true);
  }
  // 初始化
  return (
  <div>
    {
      showDetail === false
      ?
      <div>
        <BreadcrumbBox list={breadcrumbList}></BreadcrumbBox>
        <div className='agent-main'>
        <Form
          initialValues={values} 
          form={searchForm} 
          onFinish={(val) => {
            handleSubmit(val)
          }}>
            <Card className="formCard" style={{ width: '100%' }} bordered={false}>
              <Row>
                <Col {...layout1}>
                  <Form.Item
                    name="transOrderNo"
                    className="formItem"
                    label="订单号"
                    labelCol={labelCol}
                    wrapperCol={wrapperCol}
                  >
                    <Input allowClear placeholder="订单号" />
                  </Form.Item>
                </Col>
                <Col {...layout1}>
                  <span className="buttonLeft">
                    <Button type="primary" htmlType="submit">
                      查询
                    </Button>
                    <Button
                      className="reset-btn"
                      type="default"
                      onClick={() => {
                        searchForm.resetFields()
                      }}
                    >
                      重置
                    </Button>
                  </span>
                </Col>
              </Row>
            </Card>
          </Form>
          <div className='table-box'>
            <Card>
              <div className='table'>
                <Table
                  loading={loading}
                  size='middle'
                  bordered
                  scroll={{ x: 1224 }}
                  rowKey={'id'}
                  className='antd-table'
                  dataSource={dataSource}
                  pagination={false}
                  columns={columns} />
              </div>
            </Card>
          </div>
        </div>
      </div>
      :
      <PaymentDetail detailParams={detailParams} type={'arbitrate'} back={()=>{setShowDetail(false)}} />
    }
  </div>
  )
}
export default withRouter(Query)